<template>
  <div class="admin">
    <!-- 左侧菜单区 -->
    <div :class="['left', collapse ? 'hide' : '']">
      <!-- 左侧头部 -->
      <div class="head flx-row">
        <img src="./../../static/img/usericon.png" alt="">
        <div v-if="!collapse">{{ $t('lang.common_hostname') }}</div>
      </div>
      <!-- 主菜单 -->
      <collapsedMenu :collapse="collapse" />
    </div>
    <div class="right">
      <!-- 右边头部 -->
      <div class="top flex" :class="{ 'side-hide': collapse }">
        <div class="top-left flx-row">
          <!-- 展开/收起按钮 -->
          <div class="flod hcolor" @click="flodAction">
            <i :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" />
          </div>
          <!-- 刷新按钮 -->
          <div class="flod hcolor" @click="refreshAction">
            <i class="el-icon-refresh-right hcolor" />
          </div>
        </div>
        <div class="top-right flx-row">
          <!-- 用户头像+昵称 -->
          <el-popover placement="bottom" width="100" trigger="hover">
            <selectitem :data-list="dataList" @selectAction="selectAction" />
            <div slot="reference" class="item1 flx-row hcolor">
              <img src="./../../static/img/usericon2.png" alt="">
              <div>{{ $t('lang.common_username') }}</div>
            </div>
          </el-popover>
          <!-- 语言切换 -->
          <el-popover placement="bottom" width="100" trigger="hover">
            <selectitem :data-list="langueList" @selectAction="selectLang" />
            <div slot="reference" class="item2 hcolor">
              <i class="iconfont icon-yuyan" />
            </div>
          </el-popover>
        </div>
      </div>
      <!-- 右边内容区 -->
      <div class="top-tags" :class="{ 'side-hide': collapse }">
        <tagsitem />
      </div>
      <router-view class="content" :class="{ 'side-hide': collapse }" />
    </div>
  </div>
</template>
<script>
import selectitem from './../components/SelectItem'
import collapsedMenu from './../components/collapsedMenu'
import tagsitem from './../components/tagsItem'
export default {
  name: 'Admin',
  components: {
    selectitem,
    collapsedMenu,
    tagsitem
  },
  data() {
    return {
      collapse: false,
      dataList: [
        {
          key: 1,
          value: '个人中心',
          icon: 'el-icon-user',
          path: '/me'
        },
        {
          key: 2,
          value: '退出登录',
          icon: 'el-icon-switch-button',
          path: '/'
        }
      ],
      langueList: [
        {
          key: 1,
          value: '简体中文',
          name: 'zh-cn',
          select: true ,
        },
        {
          key: 2,
          value: 'English',
          name: 'en-us',
          select: false ,
        }
      ]
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.collapse = this.$utils.getLocalStorage('collapse', 'boolen')
    console.log('打印数据类型--', typeof this.$utils.getLocalStorage('collapse'))
  },
  methods: {
    selectAction(item) {
      if (item.path === '/') {
        this.$confirm('确认退出当前用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('tagsView/delAllViews')
          this.$router.replace(item.path)
        })
      } else {
        this.$router.push(item.path)
      }
    },
    /**
     * 切换语言方法
     * @param {Object} item
     */
    selectLang(item){
      let that = this
      if(that.$i18n.locatle == item.name){
        return;
      }
      that.$i18n.locale = item.name;
      that.$message({
          message: '切换语言成功！',
          type: 'success'
      });
      //切换成功以后重新生成列表数据
      that.langueList.forEach(function(val, index, arr){
         if(val.name == item.name){
            that.langueList[index].select = true;
         }else{
            that.langueList[index].select = false;
         }
      });
    },
    flodAction() {
      this.collapse = !this.collapse
      this.$store.commit('setting/collapseChange', this.collapse)
      localStorage.setItem('collapse', this.collapse)
    },
    refreshAction() {
      this.$store.commit('setting/clickRefresh', true)
      setTimeout(() => {
        this.$store.commit('setting/clickRefresh', false)
      }, 200)
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin tranStyle{
  transition: 0.2s all ease;
    -moz-transition: 0.2s all ease; /* Firefox 4 */
    -webkit-transition: 0.2s all ease; /* Safari 和 Chrome */
    -o-transition: 0.2s all ease; /* Opera */
}
.admin {
  display: flex;
  .left {
    width: 256px;
    min-width: 256px;
    max-width: 256px;
    background: #001529;
    min-height: 100vh;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    .head {
      width: 100%;
      font-size: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 84px;
      color: white;
      img {
        width: 25px;
        margin-right: 12px;
      }
    }
  }
  .hide {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    @include tranStyle;
    overflow: hidden;
  }
  .right {
    width: 100%;
    background: #f0f2f5;
    .top {
      position: absolute;
      top: 0;
      left: 256px;
      right: 0;
      height: 64px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      background: white;
      .top-left {
        color: rgba(0, 0, 0, 0.65);
        font-size: 23px;
        .flod {
          width: 64px;
          height: 64px;
          text-align: center;
          line-height: 64px;
          cursor: pointer;
        }
      }
      .top-right {
        font-size: 14px;
        padding-right: 20px;
        .item1 {
          height: 64px;
          line-height: 64px;
          color: gray;
          padding: 0 10px;
          img {
            width: 24px;
            margin-right: 5px;
          }
        }
        .item2 {
          width: 40px;
          height: 64px;
          text-align: center;
          line-height: 64px;
        }
      }
    }
    .top-tags{
      position: absolute;
      top: 65px;
      left: 256px;
      right: 0;
      height: 54px;
      padding-left: 20px;
      background: white;
    }
    .content{
      position: absolute;
      top: 129px;
      left: 256px;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      overflow-x: auto;
    //   margin: 24px;
      padding: 24px;
      margin-top: 1px;
    //   background: white;
    }
    .side-hide{
        left: 64px;
         @include tranStyle;
    }
  }
}
</style>
